<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>选择分类</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
    <style type="text/css">
        .index-outside > section .section-main {
            min-width: 0px !important;
            /*max-width: 800px !important;*/
            padding: 0px 15px;
        }

        .index-outside > section {
            padding-bottom: 0px !important;
        }

        .index-outside > section .section-main {
            margin-bottom: 0px;
        }

        .expand .icon-right {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .icon-right {
            display: inline-block;
            -webkit-transition: all .5s;
        }
    </style>
</head>
<body>
<!--头部-->
<div class="index-outside">
    <!--内容-->
    <section class="no-fix">
        <div class="section-main">
            <form class="layui-form" action="${ctx}/epService/category/selectEpCategoryList.do" id="myForm"
                  method="post">
                <input type="hidden" name="pageNo" id="pageNo"/>
                <input type="hidden" name="categoryIds" value="${categoryIds}"/>
            </form>
            <div class="c-time-list-content" style="padding-top: 0px;">
                <input type="hidden" id="categoryIds"/>
                <input type="hidden" id="categoryNames"/>
                <input type="hidden" id="selectDatas"/>
                <table class="layui-table layui-form" lay-skin="line">
                    <colgroup>
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>数量</th>
                        <%--<th>创建时间</th>--%>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="children" items="${list}">
                        <tr class="children-tr-${children.id}" data-id="${children.id}" data-name="${children.name}">
                            <c:set var="chk" value=""/>
                            <c:forEach var="categoryId" items="${fn:split(categoryIds, ',')}">
                                <c:if test="${children.id == categoryId}">
                                    <c:set var="chk" value="true"/>
                                </c:if>
                            </c:forEach>
                            <td>
                                <input name="id" type="checkbox" ${chk == true ? 'checked="checked"' : ''}
                                       lay-skin="primary" data-name="${children.name}"
                                       class="goods-chk"
                                       value="${children.id}" lay-filter="categoryChk"/>
                            </td>
                            <td>
                                ${children.name}
                            </td>
                            <td>${children.goodsNum}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
                <div id="page_content" class="page-container"></div>
            </div>

        </div>
    </section>
</div>
<!--底部-->
<%@include file="../include/incScript.jsp" %>
<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript">
    var storage = localStorage;
    $(function () {
       storage.setItem("server_epCategory", '${categoryJson}');
        // 加载分页
        loadPageNew({
            elem: 'page_content',
            totalCount: '${page.totalCount}',
            limit: '${page.limit}',
            page: '${page.page}'
        });
        layui.use(['form', 'laypage', 'element'], function () {
            var form = layui.form, element = layui.element;

            form.on('checkbox(chkAll)', function (data) {
                var checked = data.elem.checked;
                if (checked) {
                    $(".goods-chk").each(function (index, ele) {
                        $(ele).prop("checked", true);
                    });
                } else {
                    $(".goods-chk").each(function (index, ele) {
                        $(ele).prop("checked", false);
                    });
                }
                form.render('checkbox');
            })
            // 二级分类选择
            form.on('checkbox(categoryChk)', function (data) {

                var giftJson = storage.getItem("server_epCategory") || [];
                var _giftArray = eval(giftJson);

                var index = -1; // 如果不存在返回-1，否则返回index
                $.each(_giftArray, function (ii, dd) {
                    if (data.value == dd.id) {
                        index = ii;
                    }
                });

                var chk = $(data.elem)[0].checked; // 是否选中
                if (chk) {
                    if (index == -1) {
                        $("tbody tr[class*=children-tr]").each(function (jj, dd) {
                            var id = $(dd).data("id");
                            if (data.value == id) {
                                var obj = {
                                    id: id,
                                    name: $(dd).data("name")
                                };
                                _giftArray.push(obj);
                            }
                        });
                    }
                } else {
                    _giftArray.splice(index, 1);
                }

                var _idsArray = _giftArray.filter(function (arr) {
                    return true;
                }).map(function (arr) {
                    return arr.id;
                });
                var _nameArray = _giftArray.filter(function (arr) {
                    return true;
                }).map(function (arr) {
                    return arr.name;
                })
                storage.setItem("server_epCategory", JSON.stringify(_giftArray));
                $("[name=categoryIds]").val(_idsArray.join(","));
                $("[name=categoryNames]").val(_nameArray.join(","));
            });


        });
        $("#submitBtn").click(function () {
            $("#myForm").submit();
        });

        $("#resetBtn").click(function () {
            $("#myForm input[type=text]").val("");
        });

/*        $("tbody").delegate(".icon-right", "click", function (e) {
            var $target = $(e.target);
            var $span = $target.parent('span');
            var parentId = $target.closest("tr").data("id");
            if ($span.hasClass("expand")) {
                $span.removeClass("expand");
                $("tr[class=children-tr-" + parentId + "]").hide();
            } else {
                $span.addClass("expand");
                $("tr[class=children-tr-" + parentId + "]").show();
            }
        })*/
    });

    function multiSelect() {
        var giftJson = storage.getItem("server_epCategory");
        var _giftArray = eval(giftJson);
        if (_giftArray.length == 0) {
            util.layerMsgError("请先选择")
            return false;
        }
        var flag = true;
        var _idArray = new Array();
        var _nameArray = new Array();

        $.each(_giftArray, function (ii, dd) {
            _idArray.push(dd.id);
            _nameArray.push(dd.name);
        });

        var ids = _idArray.join(",");
        var names = _nameArray.join(",");
        $("#categoryIds").val(ids);
        $("#categoryNames").val(names);
        return flag;
    }

    function doSubmit() {
        return multiSelect();
    }
</script>
</body>
</html>